<template>
  <div class="app">
    <el-form :inline="true" :model="queryForm" @keyup.enter.native="m_onSubmit">
      <el-form-item label="查询">
        <el-input v-model="queryForm.query" placeholder="全文查询" clearable />
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="queryForm.user_id" placeholder="用户ID" clearable />
      </el-form-item>
      <el-form-item label="支付状态">
        <el-select v-model="queryForm.pay_status" placeholder="支付状态" clearable>
          <el-option label="未付款" value="0" />
          <el-option label="已付款" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否已发货">
        <el-select v-model="queryForm.is_send" placeholder="是否发货" clearable>
          <el-option label="否" value="0" />
          <el-option label="是" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="m_onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="p-b">
      <el-col>
        <el-button @click="m_exportData">导出</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        min-width="80"
        prop="order_id"
        label="订单 ID"
        fixed
      />
      <el-table-column
        min-width="80"
        prop="user_id"
        label="用户 ID"
      />
      <el-table-column
        min-width="180"
        label="订单号"
      >
        <template slot-scope="scope">
          {{ scope.row.order_number.replace('itcast-', 'cc3688-') }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        prop="order_price"
        label="订单金额"
      />
      <el-table-column
        min-width="80"
        prop="order_pay"
        label="支付方式"
      >
        <template slot-scope="scope">
          {{ payWays[scope.row.order_pay] }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="140"
        prop="is_send"
        label="是否发货"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.is_send == 1 ? '已经发货': '未发货' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        prop="trade_no"
        label="运单号"
      />
      <el-table-column
        min-width="100"
        prop="order_fapiao_title"
        label="个人发票抬头"
      />
      <el-table-column
        min-width="100"
        prop="order_fapiao_company"
        label="公司发票抬头"
      />
      <el-table-column
        min-width="80"
        prop="order_fapiao_content"
        label="发票内容"
      />
      <el-table-column
        min-width="80"
        prop="pay_status"
        label="支付状态"
      >
        <template slot-scope="scope">
          {{ scope.row.pay_status == 1 ? '已付款': '未付款' }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="250"
        prop="cgn_address"
        label="收货地址"
      />
      <el-table-column
        min-width="80"
        prop="cgn_name"
        label="收货人"
      />
      <el-table-column
        min-width="100"
        prop="cgn_tel"
        label="联系电话"
      />
      <el-table-column
        min-width="80"
        prop="cgn_code"
        label="邮政编号"
      />
      <el-table-column
        min-width="150"
        label="下单时间"
      >
        <template slot-scope="scope">
          {{ scope.row.create_time | parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        min-width="150"
        label="更新时间"
      >
        <template slot-scope="scope">
          {{ scope.row.update_time | parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="操作"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button v-permission="['orders_155_03']" size="mini" @click="orderDetail(scope.row.order_id)">详情</el-button>
          <el-button v-permission="['orders_154_03']" size="mini" @click="orderEdit(scope.row.order_id)">更改</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="m_pagination.total"
      :page.sync="m_pagination.page"
      :limit.sync="m_pagination.pageSize"
      @pagination="loadTableData"
    />

  </div>
</template>

<script>
import { getOrders, putOrder } from '@/api/orders'
import { excel, pagination, query } from '@/mixins'
import { parseTime } from '@/utils'
import { payWays } from '@/utils/default'

// 导出 excel
const tHeader = ['订单 ID', '用户 ID', '订单号', '订单金额', '支付方式', '是否发货', '运单号', '个人发票抬头', '公司发票抬头', '发票内容', '支付状态', '收货地址', '收货人', '联系电话', '邮政编号', '下单时间', '更新时间']
const filterVal = ['order_id', 'user_id', 'order_number', 'order_price', 'order_pay', 'is_send', 'trade_no', 'order_fapiao_title', 'order_fapiao_company', 'order_fapiao_content', 'pay_status', 'cgn_address', 'cgn_name', 'cgn_tel', 'cgn_code', 'create_time', 'update_time']
const excelName = '订单列表'

export default {
  name: 'ORDERSLIST',
  // components: {
  //   ...components
  // },
  mixins: [pagination(), query(), excel(tHeader, filterVal, excelName, 'excelData')],
  data() {
    return {
      queryForm: {
        query: '',
        user_id: '',
        pay_status: ''
      },
      tableData: [],
      dialogVisible: false,
      type: 1,
      userId: '',
      roleVisible: false,
      user: {},
      excelData: [],
      payWays
    }
  },
  created() {
    this.loadTableData()
  },
  methods: {
    async loadTableData() {
      const params = {
        ...this.queryForm,
        pagenum: this.m_pagination.page,
        pagesize: this.m_pagination.pageSize
      }
      const { goods, total } = await getOrders(params)
      goods.forEach(i => {
        if (i.is_send != 0 || i.is_send != 1) {
          i.is_send = i.is_send === '否' ? 0 : 1
        }
        if (i.consignee_addr && i.consignee_addr.length > 0) {
          const res = i.consignee_addr.match(/".+?"/gi)
          if (res) {
            res.forEach((item, index, arr) => {
              if (item.replace(/"/gi, '') === 'cgn_name') {
                i.cgn_name = arr[index + 1].replace(/"/gi, '')
              }
              if (item.replace(/"/gi, '') === 'cgn_address') {
                i.cgn_address = arr[index + 1].replace(/"/gi, '')
              }
              if (item.replace(/"/gi, '') === 'cgn_tel') {
                i.cgn_tel = arr[index + 1].replace(/"/gi, '')
              }
              if (item.replace(/"/gi, '') === 'cgn_code') {
                i.cgn_code = arr[index + 1].replace(/"/gi, '')
              }
            })
          }
        }
      })
      this.tableData = goods
      this.m_pagination.total = total
      this.getExcelData()
    },
    orderDetail(id) {
      this.$router.push({ name: 'orders_detail', params: { id }})
    },
    orderEdit(id) {
      this.$router.push({ name: 'orders_edit', params: { id }})
    },

    getExcelData() {
      const tableData = JSON.parse(JSON.stringify(this.tableData))
      this.excelData = tableData.map(i => {
        i.order_number = i.order_number.replace('itcast-', 'cc3688-')
        i.order_pay = this.payWays[i.order_pay]
        i.pay_status = i.pay_status == 1 ? '已付款' : '未付款'
        i.create_time = parseTime(i.create_time)
        i.update_time = parseTime(i.update_time)
        return i
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  .is-send {
    display: flex;
    justify-content: space-between;
  }
}
</style>
